<template>
    <div class="micro-content disFlex vertical">
        <!-- 顶部操作栏 -->
        <div class="top-content disFlex center">
            <div style="width: 200px;min-width: 200px;margin-right:15px;">
                <Input v-model="search" @keyup.enter.native="searchData" placeholder="请输入页面名称或编号"></Input>
            </div>
            <Button type="primary" @click="searchData">搜索</Button>  
            <div class="Flex"></div>
            <Button type="primary" @click="createPage">+ 新增微页面</Button>   
        </div>

        <!-- 表格 -->
        <div ref="tableContent" class="table-content" style="position: relative;">
            <Spin fix v-if="tableSpinShow"></Spin> 
            <Table align="center" :height="tableHeight" :columns="columns" :data="listData">
                <div slot="footer">
                    <Row type="flex" justify="center" align="middle">
                        <Page :total="totalPage" :page-size=20 :current="page" @on-change="changePage" show-elevator></Page>
                    </Row>
                </div>
            </Table>
        </div>

         <!-- 标签选择器 -->
        <tagSelect @confirm="confirmTagSelect" :selectNum="5" ref="tagModal" :tagIdStr="tagIdStr"></tagSelect>
    
    </div>
</template>

<script>

import { getPageList,createMicroPage,removePage,addPageTag,removePageTag } from "api/shopDecoration.js"
// 标签选择器组件
import tagSelect from 'base/tag-select/tag-select'

export default {
    name: "micropage",
    data () {
        return {
            search: "",
            totalPage: 20,
            page: 1,
            tableHeight: 0,
            columns: [
                {
                    title: '编号',
                    key: 'label_id',
                    align: 'left'
                },
                {
                    title: '页面名称',
                    key: 'label_name_cn',
                    align: 'left'
                },
                // {
                //     title: '标签',
                //     key: 'up_tags',
                //     align: 'left',
                //     minWidth: 200,
                //     render: (h, params) => {
                //         var that = this;
                //         return h('div',{
                //              style: {
                //                 display: "flex",
                //                 alignItem: "flex-start",
                //                 flexWrap: "wrap"
                //             }
                //         }, [
                //            params.row.up_tags.map(item=>{
                //                return [
                //                    h("span",{
                //                         style: {
                //                             background: "lightgray",
                //                             padding: "3px 5px",
                //                             marginRight: "2px",
                //                             marginBottom: "10px",
                //                             borderTopLeftRadius: "3px",
                //                             borderBottomLeftRadius: "3px",
                //                         }
                //                     },item.tag_title),
                //                     h("span",{
                //                         style: {
                //                             background: "lightgray",
                //                             padding: "3px 5px",
                //                             marginRight: "8px",
                //                             marginBottom: "10px",
                //                             fontSize: "12px",
                //                             borderTopRightRadius: "3px",
                //                             borderBottomRightRadius: "3px",
                //                             cursor: "pointer",
                //                         },
                //                         on: {
                //                             click: () => {
                //                                 this.$Modal.confirm({
                //                                     title: "提示",
                //                                     content: "是否要删除该标签",
                //                                     onOk: () => {
                //                                         removePageTag({labelId: params.row.label_id, tagId: item.tag_id}).then(_res=>{
                //                                             this.$Message.success("删除标签成功");
                //                                             this.searchData();
                //                                         }).catch(err=>{
                //                                             this.$Message.error(err.message);   
                //                                         });
                //                                     }
                //                                 });
                //                             }
                //                         }
                //                     },"x")

                //                ]
                //            }),
                //             h('span', {
                //                 style: {
                //                     display: (params.row.up_tags.length<=5)?"":"none",
                //                     background: "lightgray",
                //                     padding: "3px 5px",
                //                     marginBottom: "10px",
                //                     cursor: "pointer",
                //                     borderRadius: "3px"
                //                 },
                //                 on: {
                //                     click: () => {
                //                         this.curIndex = params.index; 
                //                         this.label_id = params.row.label_id;
                //                         this.$refs.tagModal.show();
                //                     }
                //                 }
                //             }, '添加标签'),
                           
                //         ]); 
                //     }
                // },
                {
                    title: '模块数',
                    key: 'label_goods',
                    align: 'left'
                },
                {
                    title: '创建时间',
                    key: 'create_at',
                    align: 'left'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'right',
                    render: (h, params) => {
                        var that = this;
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small',
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        that.$router.push("/mall/microPage/allMicroPage/"+params.row.label_id);
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small',
                                },
                                on: {
                                    click: () => {
                                        that.$Modal.confirm({
                                            title: "提示",
                                            content: "是否要删除该微页面",
                                            onOk: () => {
                                                that.deleteMicroPage(params.row.label_id);
                                            }
                                        });
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }
            ],
            listData: [],
            // 选择当前微页面索引
            curIndex: 0,
            label_id: 0,
        }
    },

    methods: {
        // 获取数据
        searchData(page) {
            this.tableSpinShow = true;
            var parms = {
                page: page,
                search: this.search.trim()
            }
            getPageList(parms).then(_res=>{
                this.tableSpinShow = false; 
                this.listData = _res.data.labels;
                if (page == 1) {
                    this.totalPage = _res.data.pages*20;
                }
                this.page = page;
            }).catch(err=>{
                this.tableSpinShow = false;
                this.$Message.error(err.message);   
            })
        },

        // 选择页码
        changePage(page) {
            this.searchData(page);
        },

        // 新建页面
        createPage() {
         // this.$Modal.confirm({
         //        title: "提示",
         //        content: "是否要新建微页面",
         //        onOk: () => {
         //            that.versionRollback(version);
         //        }
         //    });
            createMicroPage().then(_res=>{
                var microId = _res.data;
                this.$router.push("/mall/microPage/allMicroPage/"+microId);
            }).catch(err=>{
                this.$Message.error(err.message);   
            })
        },

        // 删除页面
        deleteMicroPage(label_id) {
            removePage({labelId: label_id}).then(_res=>{
                this.$Message.success("删除成功！");
                this.searchData(this.page);
            }).catch(err=>{
                this.$Message.error(err.message);   
            })
        },

        // 选中标签回调
        confirmTagSelect(tagsId,tags) {
            addPageTag({labelId: this.label_id, tagId: tagsId}).then(_res=>{
                this.$Message.success("添加标签成功！");
                this.searchData(this.page);
            }).catch(err=>{
                this.$Message.error(err.message);   
            })
        }
    },

    created() {
        this.searchData(1);
    },

    mounted() {
        this.$nextTick(function () {
            this.tableHeight = this.$refs.tableContent.offsetHeight;
        })
    },

    computed: {
        tagIdStr: function () {
            let ids = "";
            if (this.listData.length == 0) return;
            let arr = this.listData[this.curIndex].up_tags;
            for (let i = 0; i < arr.length; i++) {
                const element = arr[i];
                ids += element.tag_id;
                if (i<arr.length-1) {
                    ids += ",";
                }
            }
            return ids;       
        }
    },

    components: {
        tagSelect
    }
 }
</script>

<style scoped>
.micro-content {
    padding: 12px 20px 12px 12px;
    height: calc(100vh - 64px);     
}
.top-content {
    background: white;
    padding: 15px 18px;
    margin-bottom: 12px;
}
.table-content {
    flex: 1;
}
.btn-search.btn-add {
    width: 80px;
}
</style>

<style type="text/css">
    .micro-content .ivu-table td.log-content {
        padding: 16px 0;
    }

    .micro-content .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .micro-content .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .micro-content .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .micro-content .ivu-table-wrapper {
        border: none!important;
    }

    .micro-content tr span {
        font-size: 12px!important;
    }

    .micro-content .ivu-table-cell {
        padding-left: 18px!important;
    }
    
</style>